<template>
  <div class="tabList">
    <div id="div-tabs">
      <el-tabs v-model="activeName" class="tabs_left">
        <el-tab-pane :label="item.label + '(' +item.data+')'" :name="item.name" v-for="(item ,index) in data"
                     :key="index">
          <div class="tablelist">
            <el-row :gutter="30">
              <el-col>
                <el-table
                  :data="tableData"

                  header-row-class-name="back"
                  style="width: 100%;text-align: center"
                >
                  <el-table-column
                    label="序号"
                    type="index"
                  >

                  </el-table-column>
                  <el-table-column
                    prop="matchName"
                    label="赛事名称"
                  >
                    <template slot-scope="scope">
                      <p class=" font12">{{scope.row.matchName}}</p>

                    </template>
                  </el-table-column>
                  <el-table-column

                    label="活动时间"
                  >
                    <template slot-scope="scope">
                      <p class=" font11">{{scope.row.startActivity}}</p>
                      <p class=" font11">{{scope.row.stopActivity}}</p>
                    </template>

                  </el-table-column>
                  <el-table-column
                    width="100"
                    label="状态">
                    <template slot-scope="scope">
                    <span>
                      <div class="weishouru   lin25 mt5 mr5"
                           :style="{background:item.color}"></div>{{item.label }}</span>

                    </template>
                  </el-table-column>
                  <el-table-column

                    label="活动地点">

                    <template slot-scope="scope">
                      <p class=" font12">{{scope.row.addr}}</p>

                    </template>
                  </el-table-column>
                  <el-table-column
                    width="100"
                    label="项目">
                    <template slot-scope="scope">
                      <p class=" font14">{{scope.row.project}}</p>
                    </template>
                  </el-table-column>
                  <el-table-column
                    width="100"
                    label="规定人数">
                    <template slot-scope="scope">
                      <p class=" font14">{{scope.row.requiredNumber}}</p>

                    </template>
                  </el-table-column>
                  <el-table-column
                    width="100"
                    label="已报名人数">
                    <template slot-scope="scope">
                      <p class=" font14">{{scope.row.enlistPeople}}</p>

                    </template>
                  </el-table-column>
                  <el-table-column
                    width="100"
                    label="剩余名额">
                    <template slot-scope="scope">
                      <p class=" font14">{{scope.row.surplus}}</p>

                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="address"
                    label="操作">
                    <template slot-scope="scope">
                      <el-button
                        size="mini"
                        type="text"
                        class="font14"
                        style="color: #FF6565"
                      >删除
                      </el-button>
                      <el-button
                        size="mini"
                        type="text"
                        class="font14"
                        style="color: #2C95FF"
                      >编辑
                      </el-button>
                      <el-button
                        size="mini"
                        type="text"
                        class="font14"
                        style="color: #2C95FF;"
                      >发布
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <el-row class="mt9">
                  <span class="font14  " style="color: #999999">共{{total}}条记录，第{{PageNumber}}/{{pageCount}}页</span>
                </el-row>
                <div class="center page">

                  <el-pagination
                    :page-size="pageSize"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    background
                    layout="prev, pager, next"
                    :total="total">
                  </el-pagination>
                  <el-select v-model="pageSize" placeholder="page">
                    <el-option
                      v-for="item in pages"
                      :key="item"
                      :label="item +'条/页'"
                      :value="item">
                    </el-option>
                  </el-select>
                </div>
              </el-col>

            </el-row>
          </div>
        </el-tab-pane>
        <el-tab-pane :label="label" disabled>

        </el-tab-pane>
      </el-tabs>
    </div>
  </div>

</template>

<style>
  .tabList .page .el-input--medium .el-input__inner {
    width: 99px;
    height: 35px;
    background: #FFFFFF;
    border: 1px solid #3B86FF;
    opacity: 1;
    border-radius: 4px;
  }

  .tabList .el-pagination.is-background .btn-prev, .el-pagination.is-background .btn-next, .el-pagination.is-background .el-pager li {

    background: #FFFFFF;
    border: #E8E9EC solid 1px;
    color: #4D4F5C;
    width: 35px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    opacity: 0.5;
  }

  .tabList .el-table .cell {
    text-align: center !important;
    font-size: 12px;

  }


  .el-tabs__item {

    color: #A1A0AE;
  }

  .tabs_left .el-tabs__content {

    height: 100%;

  }

  .tabs_left .el-tab-pane {
    height: 100%;
  }

  .div-center .el-divider--horizontal {

    margin: 16px 0 0 0;
  }
</style>

<script>
  import Pagination from "@/components/Pagination";

  export default {
    name: "TabPaneLab",
    components: {
      Pagination
    },

    props: {
      data: {

        type: Array,
        required: true,

      }
    },
    data() {
      return {
        label: "总计：264场",
        countnumber: '2000',
        number: '500',
        activeName: 'first',
        pageSize: 10,
        total: 1001,
        PageNumber: 1,
        pageCount: 1,
        pages: [10, 20, 30, 40, 50],
        tableData: [{
          matchName: '2021第二届四明山国际越野赛',
          startActivity: '报名开始时间2021.05.01-2021.05.10',
          stopActivity: '比赛开始时间2021.05.10-2021.05.11',
          addr: "江苏省-南京市-XXXX-XXXXXXXX",
          project: "全马",
          requiredNumber: "5000",
          enlistPeople: "0",
          surplus: "5000",
        }, {
          matchName: '2021第二届四明山国际越野赛',
          startActivity: '报名开始时间2021.05.01-2021.05.10',
          stopActivity: '比赛开始时间2021.05.10-2021.05.11',
          addr: "江苏省-南京市-XXXX-XXXXXXXX",
          project: "全马",
          requiredNumber: "5000",
          enlistPeople: "0",
          surplus: "5000",
        }, {
          matchName: '2021第二届四明山国际越野赛',
          startActivity: '报名开始时间2021.05.01-2021.05.10',
          stopActivity: '比赛开始时间2021.05.10-2021.05.11',
          addr: "江苏省-南京市-XXXX-XXXXXXXX",
          project: "全马",
          requiredNumber: "5000",
          enlistPeople: "0",
          surplus: "5000",
        }, {
          matchName: '2021第二届四明山国际越野赛',
          startActivity: '报名开始时间2021.05.01-2021.05.10',
          stopActivity: '比赛开始时间2021.05.10-2021.05.11',
          addr: "江苏省-南京市-XXXX-XXXXXXXX",
          project: "全马",
          requiredNumber: "5000",
          enlistPeople: "0",
          surplus: "5000",
        }, {
          matchName: '2021第二届四明山国际越野赛',
          startActivity: '报名开始时间2021.05.01-2021.05.10',
          stopActivity: '比赛开始时间2021.05.10-2021.05.11',
          addr: "江苏省-南京市-XXXX-XXXXXXXX",
          project: "全马",
          requiredNumber: "5000",
          enlistPeople: "0",
          surplus: "5000",
        }, {
          matchName: '2021第二届四明山国际越野赛',
          startActivity: '报名开始时间2021.05.01-2021.05.10',
          stopActivity: '比赛开始时间2021.05.10-2021.05.11',
          addr: "江苏省-南京市-XXXX-XXXXXXXX",
          project: "全马",
          requiredNumber: "5000",
          enlistPeople: "0",
          surplus: "5000",
        }, {
          matchName: '2021第二届四明山国际越野赛',
          startActivity: '报名开始时间2021.05.01-2021.05.10',
          stopActivity: '比赛开始时间2021.05.10-2021.05.11',
          addr: "江苏省-南京市-XXXX-XXXXXXXX",
          project: "全马",
          requiredNumber: "5000",
          enlistPeople: "0",
          surplus: "5000",
        }]
      }
    },
    mounted() {
      this.label = "总计：" + this.getCount() + "场";
      this.getTotlepage();
    },
    methods: {
      getCount() {
        var count = 0;
        for (let i = 0; i < this.data.length; i++) {
          count += this.data[i].data
        }
        return count;


      },
      handleSizeChange(val) {
        this.getTotlepage();
      },
      handleCurrentChange(val) {
        this.PageNumber = `${val}`

      },
      getTotlepage() {
        var self = this;

        if ((Number(self.total) % Number(self.pageSize)) != 0) {
          console.log(Number(self.total))
          self.pageCount = Math.floor((Number(self.total) / Number(self.pageSize))) + 1

        } else
          self.pageCount = Number(self.total) / Number(self.pageSize)
      }
    },


  }
</script>

<style>
  .tabs_left {
    color: #000000;
    cursor: pointer;
  }

  .tabs_left .el-tabs__active-bar {
    background-color: #3B86FF;
    font-size: 14px;

  }

  .tabs_left .el-tabs__item.is-active {
    color: #3B86FF;
  }

  .box-card-left .el-card__body {
    padding: 0;

  }
</style>
<style scoped>
  .tablelist {

    padding-left: 26px;
    padding-right: 26px;
    padding-top: 26px;
    background: #FFFFFF;
  }

  p {
    margin: 0;
    padding: 0;

  }

  .weishouru {
    width: 10px;
    height: 10px;

    border-radius: 50%;
    display: inline-block;
  }

  .tabList {
    overflow-x: hidden;

  }

  .details {
    width: 331px;
  }

  .activeimg {
    width: 331px;
    height: 124px;;

    border-radius: 16px;
    background-size: cover;
  }

  .div-center {
    display: flex;
    justify-content: center;

  }

  .left_top_tip {
    margin: 0;
    padding: 0;
    width: 53px;
    height: 53px;
    line-height: 53px;
    text-align: center;
    border-radius: 0px 0px 10px 0px;
    text-align: center;
    display: inline-block;
    color: #FFFFFF;
  }

  .number {
    color: #F1C40F;
  }

  .span-h2 {
    font-size: 17px;
    font-family: Source Sans Pro;
    color: #282D30;
    margin: 0 0 0 10px;

    padding: 0;
    font-weight: 700;
  }

  .mt34 {
    margin: 30px 0 0 0;
    padding: 0;
    line-height: 1;
  }

  .span-date,
  .span-content {
    font-size: 16px;
    color: #666666;
    padding: 0;
    margin: 0;
    font-family: Microsoft YaHei;
  }

  .box-card-left {
    height: 363px;
    padding: 0;
    margin-bottom: 24px;
    background: #FFFFFF;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
    opacity: 1;


  }


  .tabs-card-right-textAndIcon {

    font-size: 20px;
    text-align: center;
    font-family: Microsoft YaHei;
    font-weight: 400;
    line-height: 187px;
    max-height: 187px;;
    color: #282D30;
  }
</style>
